import { defineComponent, PropType, renderSlot } from 'vue'
import './index.less'

export default defineComponent({
	name: 'todo-header',
	props: {
		title: {
			type: String,
			required: true
		},
		theme: {
			type: Array as PropType<string[]>,
			required: true
		},
		showTitle: {
			type: Boolean,
			default: false
		},
		titleColor: String,
		// on开头的方法是需要来兼容jsx写法时候的emit事件
		onRightHandler: Function as PropType<(val: any) => void>
	},
	emits: ['right-handler'],
	setup(props, { slots, emit }) {
		return () => {
			return (
				<div class="todo-header" style={{ backgroundColor: props.theme[0] }}>
					<div
						class={{ 'todo-header-title': true, show: props.showTitle }}
						style={{ color: props.theme[1] || props.titleColor }}
					>
						{props.title}
					</div>
					<div
						class="todo-header-right"
						style={{ color: props.theme[1] }}
						onClick={() => emit('right-handler')}
					>
						{renderSlot(slots, 'right', undefined, () => [
							<i class="icon iconfont">&#xe60c;</i>
						])}
					</div>
				</div>
			)
		}
	}
})
